<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Menu 导航菜单</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
<style type="text/css">
.is-pull{
	width: 20px;
	height: 22px;
}
</style>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">顶部导航</a-divider><!-- =============================================================== -->
	<p class="desc">水平的顶部导航菜单。</p>
	<a-menu v-model:selected-Keys="current" mode="horizontal" :items="items" @click="menuClick" @open-Change="onOpenChange"></a-menu>
	
	<a-divider class="a-divi" orientation="left">内嵌菜单</a-divider><!-- =============================================================== -->
	<p class="desc">垂直菜单，子菜单内嵌在菜单区域。</p>
	<a-menu id="dddddd" v-model:open-Keys="openKeys" v-model:selected-Keys="selectedKeys" style="width: 256px" mode="inline"
		:items="items2" @click="menuClick" @open-Change="onOpenChange"></a-menu>
	
	<a-divider class="a-divi" orientation="left">内嵌菜单（3.X版本）</a-divider><!-- =============================================================== -->
	<p class="desc">垂直菜单，子菜单内嵌在菜单区域。</p>
	<a-menu id="dddddd" :open-Keys="openKeys" v-model:selected-Keys="selectedKeys" style="width: 256px" mode="inline"
		 @open-Change="onOpenChange" @click="menuClick">
		<a-sub-menu key="sub1">
			<template #icon>
				<folder-remove class="aut-icon"></folder-remove>
			</template>
			<template #title>Navigation One</template>
			<a-menu-item-group key="g1">
				<template #icon>
					<folder-remove class="aut-icon"></folder-remove>
				</template>
				<template #title>Item 1</template>
				<a-menu-item key="1">Option 1</a-menu-item>
				<a-menu-item key="2">Option 2</a-menu-item>
			</a-menu-item-group>
			<a-menu-item-group key="g2" title="Item 2">
				<a-menu-item key="3">Option 3</a-menu-item>
				<a-menu-item key="4">Option 4</a-menu-item>
			</a-menu-item-group>
		</a-sub-menu>
		<a-sub-menu key="sub2">
			<template #icon>
				<grid class="aut-icon"></grid>
			</template>
			<template #title>Navigation Two</template>
			<a-menu-item key="5">Option 5</a-menu-item>
			<a-menu-item key="6">Option 6</a-menu-item>
			<a-sub-menu key="sub3" title="Submenu">
				<a-menu-item key="7">Option 7</a-menu-item>
				<a-menu-item key="8">Option 8</a-menu-item>
			</a-sub-menu>
		</a-sub-menu>
		<a-divider style="margin:0px;"></a-divider>
		<a-sub-menu key="sub4">
			<template #icon>
				<folder-remove class="aut-icon"></folder-remove>
			</template>
			<template #title>Navigation Three</template>
			<a-menu-item key="9">Option 9</a-menu-item>
			<a-menu-item key="10">Option 10</a-menu-item>
			<a-menu-item key="11">Option 11</a-menu-item>
			<a-menu-item key="12">Option 12</a-menu-item>
		</a-sub-menu>
		<a-menu-item-group key="g29" title="Item 29">
			<a-menu-item key="39">Option 39</a-menu-item>
			<a-menu-item key="49">Option 49</a-menu-item>
		</a-menu-item-group>
	</a-menu>
	
	<a-divider class="a-divi" orientation="left">缩起内嵌菜单</a-divider><!-- =============================================================== -->
	<p class="desc">内嵌菜单可以被缩起/展开。你可以在 Layout 里查看侧边布局结合的完整示例。</p>
	<div style="width: 256px">
		<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
			<expand v-if="state.collapsed" class="is-pull"></expand>
			<fold v-else class="is-pull"></fold>
		</a-button>
		<a-menu v-model:open-Keys="state.openKeys" v-model:selected-Keys="state.selectedKeys" mode="inline" theme="dark"
			:inline-collapsed="state.collapsed" :items="items3" @click="menuClick" @open-Change="onOpenChange"></a-menu>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">只展开当前父级菜单</a-divider><!-- =============================================================== -->
	<p class="desc">点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。</p>
	<div>
		<a-menu v-model:selected-keys="state4.selectedKeys" style="width: 256px" mode="inline" :open-keys="state4.openKeys"
			:items="items2" @click="menuClick" @open-Change="onOpenChangeOnly"></a-menu>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">垂直菜单</a-divider><!-- =============================================================== -->
	<p class="desc">子菜单是弹出的形式。</p>
	<a-menu v-model:open-Keys="state5.openKeys" v-model:selected-Keys="state5.selectedKeys" style="width: 256px" mode="vertical"
		:items="items2" @click="menuClick" @open-Change="onOpenChange"></a-menu>
	
	
	<a-divider class="a-divi" orientation="left">主题</a-divider><!-- =============================================================== -->
	<p class="desc">内建了两套主题 light 和 dark，默认 light。</p>
	<div>
		<a-switch :checked="theme === 'dark'" checked-children="Dark" un-checked-children="Light" @change="changeTheme"></a-switch>
		<br /><br />
		<a-menu v-model:open-Keys="state6.openKeys" v-model:selected-Keys="state6.selectedKeys" style="width: 256px" mode="inline"
			:theme="theme" :items="items3" @click="menuClick" @open-Change="onOpenChange"></a-menu>
	</div>
	
	
	
	<a-divider class="a-divi" orientation="left">子菜单主题</a-divider><!-- =============================================================== -->
	<p class="desc">你可以通过 theme 属性来设置 SubMenu 的主题从而达到不同目录树下不同主题色的效果。该例子默认为根目录深色，子目录浅色效果。</p>
	<div>
		<a-switch :checked="theme7 === 'dark'" checked-children="dark" un-checked-children="light" @Change="changeTheme7"></a-switch>
		<br /><br />
		<a-menu :style="{ width: '256px' }" :open-keys="state7.openKeys" :selected-keys="state7.selectedKeys" mode="vertical" theme="dark"
			:items="retItems7" @click="menuClick" @open-Change="onOpenChange"></a-menu>
	</div>
	
	
	<a-divider class="a-divi" orientation="left">切换菜单类型</a-divider><!-- =============================================================== -->
	<p class="desc">展示动态切换模式。</p>
	<div>
		<a-switch :checked="state8.mode === 'vertical'" checked-children="vertical" un-checked-children="inline" @change="changeMode8"></a-switch> Change Mode
		<span class="ant-divider" style="margin: 0 1em"></span>
		<a-switch :checked="state8.theme === 'dark'" checked-children="dark" un-checked-children="light" @change="changeTheme8"></a-switch> Change Theme
		<br /><br />
		<a-menu v-model:open-Keys="state8.openKeys" v-model:selected-Keys="state8.selectedKeys" style="width: 256px"
			:mode="state8.mode" :items="items3" :theme="state8.theme"></a-menu>
	</div>
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
function getItem(label, key, icon, children, type) {
	return {key,icon,children,label,type,};
}
const Main = {
data() {
	return {
		current: ['mail'],
		items: [
			{
				key: 'mail',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: 'Navigation One',
				title: 'Navigation One',
			},
			{
				key: 'app',
				icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
				label: 'Navigation Two',
				title: 'Navigation Two',
			},
			{
				key: 'sub1',
				icon: () => Vue.h(ElementPlusIconsVue.Share, {class: "aut-icon"}),
				label: 'Navigation Three - Submenu',
				title: 'Navigation Three - Submenu',
				children: [
					{type: 'group',label: 'Item 1',key: 'ate',
						children: [
							{label: 'Option 1',key: 'setting:1',},
							{label: 'Option 2',key: 'setting:2',},
						],
					},
					{type: 'group',label: 'Item 2',
						children: [
							{label: 'Option 3',key: 'setting:3',},
							{label: 'Option 4',key: 'setting:4',},
						],
					},
				],
			},
			{
				key: 'alipay',
				label: Vue.h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
				title: 'Navigation Four - Link',
			},
		],
		
		openKeys: ['sub1'],
		selectedKeys: ['2'],
		items2: [
			getItem('Navigation One', 'sub1', () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}), [
				getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
				getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
			]),
			getItem('Navigation Two', 'sub2', () => Vue.h(ElementPlusIconsVue.Share, {class: "aut-icon"}), [
				getItem('Option 5', '5'),
				getItem('Option 6', '6'),
				getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
			]),
			{type: 'divider',},
			getItem('Navigation Three', 'sub4', () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}), [
				getItem('Option 9', '9'),
				getItem('Option 10', '10'),
				getItem('Option 11', '11'),
				getItem('Option 12', '12'),
			]),
			getItem('Group', 'grp', null, [getItem('Option 13', '13'), getItem('Option 14', '14')], 'group'),
		],
		
		state: {
			collapsed: false,
			selectedKeys: ['1'],
			openKeys: ['sub1'],
			preOpenKeys: ['sub1'],
		},
		items3: [
			{
				key: '1',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: 'Option 1',
				title: 'Option 1',
			},
			{
				key: '2',
				icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
				label: 'Option 2',
				title: 'Option 2',
			},
			{
				key: '3',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: 'Option 3',
				title: 'Option 3',
			},
			{
				key: 'sub1',
				icon: () => Vue.h(ElementPlusIconsVue.Share, {class: "aut-icon"}),
				label: 'Navigation One',
				title: 'Navigation One',
				children: [
					{key: '5',label: 'Option 5',title: 'Option 5',},
					{key: '6',label: 'Option 6',title: 'Option 6',},
					{key: '7',label: 'Option 7',title: 'Option 7',},
					{key: '8',label: 'Option 8',title: 'Option 8',},
				],
			},
			{
				key: 'sub2',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: 'Navigation Two',
				title: 'Navigation Two',
				children: [
					{key: '9',label: 'Option 9',title: 'Option 9',},
					{key: '10',label: 'Option 10',title: 'Option 10',},
					{key: 'sub3',label: 'Submenu',title: 'Submenu',
						children: [
							{key: '11',label: 'Option 11',title: 'Option 11',},
							{key: '12',label: 'Option 12',title: 'Option 12',},
						],
					},
				],
			},
		],
		
		state4: {
			rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
			openKeys: ['sub1'],
			selectedKeys: ['2'],
		},
		
		state5: {
			openKeys: ['sub1'],
			selectedKeys: ['2'],
		},
		
		theme: 'dark',
		state6: {
			openKeys: ['sub1'],
			selectedKeys: ['2'],
		},
		
		theme7: 'dark',
		state7: {
			openKeys: ['sub1'],
			selectedKeys: ['2'],
		},
		items7: [
			{
				key: '1',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: 'Option 1',
				title: 'Option 1',
			},
			{
				key: 'sub1',
				icon: () => Vue.h(ElementPlusIconsVue.Share, {class: "aut-icon"}),
				label: 'Navigation One',
				title: 'Navigation One',
				children: [
					{key: '5',label: 'Option 5',title: 'Option 5',},
					{key: '6',label: 'Option 6',title: 'Option 6',},
					{key: '7',label: 'Option 7',title: 'Option 7',},
					{key: '8',label: 'Option 8',title: 'Option 8',},
				],
				theme: 'light',
			},
			{
				key: 'sub2',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: 'Navigation Two',
				title: 'Navigation Two',
				children: [
					{key: '9',label: 'Option 9',title: 'Option 9',},
					{key: '10',label: 'Option 10',title: 'Option 10',},
					{key: 'sub3',label: 'Submenu',title: 'Submenu',
						children: [
							{key: '11',label: 'Option 11',title: 'Option 11',},
							{key: '12',label: 'Option 12',title: 'Option 12',},
						],
					},
				],
			},
		],
		
		state8: {
			openKeys: ['sub1'],
			selectedKeys: ['7'],
			mode: 'inline',
			theme: 'dark',
		},
		
	}
},
computed:{
	retItems7(){
		return [
			{
				key: '1',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: 'Option 19',
				title: 'Option 19',
			},
			{
				key: 'sub1',
				icon: () => Vue.h(ElementPlusIconsVue.Share, {class: "aut-icon"}),
				label: 'Navigation One',
				title: 'Navigation One',
				children: [
					{key: '5',label: 'Option 5',title: 'Option 5',},
					{key: '6',label: 'Option 6',title: 'Option 6',},
					{key: '7',label: 'Option 7',title: 'Option 7',},
					{key: '8',label: 'Option 8',title: 'Option 8',},
				],
				theme: this.theme7,
			},
			{
				key: 'sub2',
				icon: () => Vue.h(ElementPlusIconsVue.FolderRemove, {class: "aut-icon"}),
				label: 'Navigation Two',
				title: 'Navigation Two',
				children: [
					{key: '9',label: 'Option 9',title: 'Option 9',},
					{key: '10',label: 'Option 10',title: 'Option 10',},
					{key: 'sub3',label: 'Submenu',title: 'Submenu',
						children: [
							{key: '11',label: 'Option 11',title: 'Option 11',},
							{key: '12',label: 'Option 12',title: 'Option 12',},
						],
						theme: this.theme7,
					},
				],
			},
		];
	},
},
methods:{
	menuClick(e){
		console.log('menuClick', e);
	},
	toggleCollapsed(){
		this.state.collapsed = !this.state.collapsed;
		this.state.openKeys = this.state.collapsed ? [] : this.state.preOpenKeys;
	},
	
	onOpenChange(openKeys){
		console.log('onOpenChange', openKeys);
	},
	onOpenChangeOnly(openKeys){
		let latestOpenKey = openKeys.find(key => this.state4.openKeys.indexOf(key) === -1);
		if (this.state4.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
			this.state4.openKeys = openKeys;
		} else {
			this.state4.openKeys = latestOpenKey ? [latestOpenKey] : [];
		}
		// console.log(latestOpenKey);
		// console.log(openKeys);
		// console.log(this.state4);
	},
	changeTheme(checked){
		this.theme = checked ? 'dark' : 'light';
	},
	changeTheme7(checked){
		this.theme7 = checked ? 'dark' : 'light';
	},
	
	changeMode8(checked){
		console.log(checked);
		this.state8.mode = checked ? 'vertical' : 'inline';
	},
	changeTheme8(checked){
		this.state8.theme = checked ? 'dark' : 'light';
	},
	
	
	
	
}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
